<template>
  <div class="app-container">
    <div class="task_before" v-if="!isTask&&isShow">
      <el-button class="tit" type='primary' size='medium'>第一步：请选择用户类型</el-button>
      <div class="flex_box line_box">
        <div class="rule_item rule_item1 flex_column_center" @click='stepOne(0)' :class="stepOneIndex==0?'cur':''">
          <p>个人用户</p>
          <span>{{user_count}}</span>
        </div>
        <div class="rule_item rule_item1 flex_column_center" @click='stepOne(1)' :class="stepOneIndex==1?'cur':''">
          <p>企业用户</p>
          <span>{{company_count}}</span>
        </div>
      </div>
      <div class="task_two" v-if="stepOneIndex>-1">
        <el-button class="tit" type='primary' size='medium'>第二步：请选择分配类型（可多选）</el-button>
        <div class="flex_box line_box">
          <div class="rule_item rule_item1 flex_column_center" v-for="(item,index) in taskUser" v-show="item.userType==stepOneIndex" :key='index' @click='stepTwo(index)' :class="stepTwoIndex==index?'cur':''">
            <p>{{item.name}}</p>
            <span>{{item.num}}</span>
          </div>
        </div>
      </div>
      <div class="task_three" v-if="stepTwoIndex>-1">
        <div class="flex_box">
          <el-button class="tit" type='primary' size='medium'>第三步：请确定任务接收对象</el-button>
          <p class="sub_title">（选择对象后，任务将实时平均分配到个人）</p>
        </div>
        <div class="tree_wrap flex_start">
          <span class="label">请选择用户：</span>
          <div class="flex1">
            <el-tree
              ref='tree'
              :props="props"
              :data='roleUser'
              show-checkbox
              node-key='role_name'
              @check-change="handleCheckChange">
            </el-tree>
          </div>
        </div>
        <div class="btm_btns flex_box_center">
          <el-button size='medium' @click="cancelParam">重置</el-button>
          <el-button type="primary" size='medium' @click="distribution">确定分配</el-button>
        </div>
      </div>
    </div>
    <div class="task_after" v-else-if="isTask&&isShow">
      <el-row :gutter="20">
        <el-col :span="12">
          <p class="btn btn_large white_text">个人用户（{{user_count}}）</p>
        </el-col>
        <el-col :span="12">
          <p class="btn btn_large white_text">企业用户（{{company_count}}）</p>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="4" v-for="(item,index) in taskUser" :key="index+'user'">
          <div class="rule_item flex_column_center">
            <p>{{item.name}}</p>
            <span>{{item.num}}</span>
          </div>
          <div v-if="item.list.length>0">
            <div class="flex_box_end">
              <el-button type="text" @click="details(item)">查看详情</el-button>
              <el-button type="text" @click="dispatchTask(item,index,2)">重新分配</el-button>
            </div>
            <el-row>
              <el-col :span="7">
                <p class="table_td table_th">处理人</p>
              </el-col>
              <el-col :span="5">
                <p class="table_td table_th">已处理</p>
              </el-col>
              <el-col :span="5">
                <p class="table_td table_th">待处理</p>
              </el-col>
              <el-col :span="7">
                <p class="table_td table_th">操作</p>
              </el-col>
            </el-row>
            <el-row v-for="item1 in item.list" :key='item1.id'>
              <el-col :span="7">
                <p class="table_td">{{item1.user_info.username}}</p>
              </el-col>
              <el-col :span="5">
                <p class="table_td">{{item1.processed}}</p>
              </el-col>
              <el-col :span="5">
                <p class="table_td">{{item1.pending}}</p>
              </el-col>
              <el-col :span="7">
                <p class="table_td table_btn" @click="dispatchTask(item1,index,3)">重新分配</p>
              </el-col>
            </el-row>
          </div>
          <div class="flex_box_end" v-else>
            <el-button type="text" @click="dispatchTask(item,index,1)">任务派发</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-dialog :visible.sync="formVisible" width="654px" @close="handleCancel" :show-close='false'>
      <div slot="title" class="dialog-title">{{title}}</div>
      <p class="dialog_title">分配类型：{{taskUser[taskType].name}}（{{taskUser[taskType].num}}）</p>
      <p class="dialog_title" v-if="type==3">分配数据范围：{{taskUserInfo.user_info.username}}（{{taskUserInfo.pending}}）</p>
      <p class="dialog_title">请选择任务接收对象：</p>
      <p class="dialog_title" v-if="type==1">（选择对象后，任务将实时平均分配到个人）</p>
      <el-tree
        ref='tree'
        :props="props"
        :data='roleUser'
        show-checkbox
        node-key='role_name'
        @check-change="handleCheckChange">
      </el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel" size='medium'>取 消</el-button>
        <el-button type="primary" @click="taskSubmit" size='medium'>确定分配</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import formOperate from '@/layout/mixin/formOperate'
export default {
  name: 'Index',
  mixins: [formOperate],
  data() {
    return {
      url:'/task/admin/getTaskData',
      isShow:false, // 数据加载完成再显示页面
      isTask:false, // 是否分配任务
      stepOneIndex:-1, // 第一步下标
      stepTwoIndex:-1, // 第二步下标
      user_count:'', // 用户数据
      company_count:'',// 企业数据
      roleUser:[],// 用户组用户
      taskUser:[
        {name:'未发布简历用户',num:1000,type:1,list:[],userType:0},
        {name:'未审核简历',num:1000,type:2,list:[],userType:0},
        {name:'未审核提现',num:1000,type:3,list:[],userType:0},
        {name:'未发布职位用户',num:1000,type:4,list:[],userType:1},
        {name:'未审核企业',num:1000,type:5,list:[],userType:1},
        {name:'未审核职位',num:1000,type:6,list:[],userType:1}
      ],
      props: {
        label: 'role_name',
        children: 'user_arr'
      },
      title:'', // 弹框标题
      type:'', // 分配入口类型 1 任务派发 2 任务重新分配 3 个人任务重新分配
      formVisible:false,
      uid_str:[], // 选择需要分配的任务人
      taskType:0,
      taskUserInfo:'' // 个人任务重新分配信息
    }
  },
  mounted() {
    this.getRoleUser()
    this.getTaskUserList(0)
  },
  methods: {
    // 获取任务管理数据
    getList() {
      this.$http.get(this.url).then(response => {
        if (response.code == 10000) {
          let data = response.data
          if (data) {
            this.user_count = data.user_count
            this.company_count = data.company_count
            this.taskUser[0].num = data.not_resume
            this.taskUser[1].num = data.not_verify_resume
            this.taskUser[2].num = data.not_verify_withdraw
            this.taskUser[3].num = data.not_post
            this.taskUser[4].num = data.not_verify_company
            this.taskUser[5].num = data.not_verify_post
          }
        }
      })
    },
    // 获取用户组用户
    getRoleUser() {
      this.$http.get('/task/admin/getRoleUser').then(response => {
        if (response.code == 10000) {
          this.roleUser = response.data
        }
      })
    },
    // 获取任务处理人
    getTaskUserList(type) {
      let params = {
        type:type
      }
      this.$http.get('/task/admin/getTaskUserList',{params:params}).then(response => {
        if (response.code == 10000) {
          if (type == 0) {
            this.isShow = true
            if (response.data.length == 0) {
              this.isTask = false
            } else {
              this.isTask = true
              this.getTaskUserList(1)
              this.getTaskUserList(2)
              this.getTaskUserList(3)
              this.getTaskUserList(4)
              this.getTaskUserList(5)
              this.getTaskUserList(6)
            }
          } else if (type == 1){
            this.taskUser[0].list = response.data
          } else if (type == 2){
            this.taskUser[1].list = response.data
          } else if (type == 3){
            this.taskUser[2].list = response.data
          } else if (type == 4){
            this.taskUser[3].list = response.data
          } else if (type == 5){
            this.taskUser[4].list = response.data
          } else if (type == 6){
            this.taskUser[5].list = response.data
          }
        }
      })
    },
    //第一步
    stepOne(index) {
      this.stepOneIndex = index
      this.stepTwoIndex = -1
    },
    // 第二步
    stepTwo(index) {
      this.stepTwoIndex = index
    },
    // 任务派发，重新分配打开弹框
    dispatchTask(item,taskType,type) {
      this.taskType = taskType
      this.type = type
      this.title = type==1?'任务派发':type==2?'任务重新分配':'个人任务重新分配'
      this.taskUserInfo = item
      this.formVisible = true
    },
    // 打开详情
    details(item) {
      this.$router.push({path:'/task/taskDetails',query:{type:item.type,title:item.name}})
    },
    // 重置
    cancelParam() {
      this.uid_str = []
      this.$refs.tree.setCheckedNodes([])
    },
    // 首次分配任务
    distribution(){
      if (this.uid_str.length == 0) {
        this.$message('请选择任务接收对象')
        return
      }
      if (this.uid_str.length > this.taskUser[this.stepTwoIndex].num) {
        this.$message('分配人数不能大于可分配任务数量')
        return
      }
      let type = this.taskUser[this.stepTwoIndex].type
      let param = {
        request_type:1,
        type:type,
        uid_str:this.uid_str.toString()
      }
      this.$http.post('/task/admin/taskSpread', param).then(response => {
        if (response.code == 10000) {
          this.isTask = true
          this.getTaskUserList(type)
        }
      })
    },
    // 确认分配
    taskSubmit() {
      if (this.uid_str.length == 0) {
        this.$message('请选择任务接收对象')
        return
      }
      if (this.type == 1 || this.type == 2) {
        if (this.uid_str.length > this.taskUser[this.taskType].num) {
          this.$message('分配人数不能大于可分配任务数量')
          return
        }
      } else if (this.type == 3) {
        if (this.uid_str.length > this.taskUserInfo.pending) {
          this.$message('分配人数不能大于可分配任务数量')
          return
        }
      }
      
      let type = this.taskUser[this.taskType].type
      let param
      if (this.type == 3) {
        param = {
          request_type:2,
          type:type,
          uid_str:this.uid_str.toString(),
          id:this.taskUserInfo.id
        }
      } else {
        param = {
          request_type:1,
          type:type,
          uid_str:this.uid_str.toString()
        }
      }
      this.$http.post('/task/admin/taskSpread', param).then(response => {
        if (response.code == 10000) {
          this.formVisible = false
          this.getTaskUserList(type)
        } else if (response.code == 10003){
          this.$message.error('您当前登录账号暂无操作权限')
        }
      })
    },
    // 任务接收对象选择后
    handleCheckChange(data, checked, indeterminate) {
      let uid = this.uid_str
      if (checked) {
        if (data.user_arr) {
          data.user_arr.forEach(res => {
            let idx = uid.findIndex(res1=>{
              return res1 == res.id
            })
            if (idx < 0) {
              uid.push(res.id)
            }
          });
        } else {
          let idx = uid.findIndex(res1=>{
            return res1 == data.id
          })
          if (idx < 0) {
            uid.push(data.id)
          }
        }
      } else if (!checked && !indeterminate){
        if (data.user_arr) {
          data.user_arr.forEach(res => {
            let idx = uid.findIndex(res1=>{
              return res1 == res.id
            })
            if (idx > -1) {
              uid.splice(idx,1)
            }
          });
        } else {
          let idx = uid.findIndex(res1=>{
            return res1 == data.id
          })
          if (idx > -1) {
            uid.splice(idx,1)
          }
        }
      }
      console.log(uid)
      this.uid_str = uid
    }
  }
}
</script>
<style lang="scss" scoped>
  @import '~@/styles/element-variables.scss';
  .task_before{
    padding-left: 120px;
  }
  .tit{
    width:250px;
    margin-bottom:20px;
    position: relative;
  }
  .tit::before{
    display: block;
    content: '';
    position:absolute;
    left: -60px;
    top:7px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    padding:4px;
    border:1px solid $--color-primary;
    background-color:currentColor;  
    background-clip: content-box;
    background-color:$--color-primary;
  }
  .sub_title{
    margin-bottom:20px;
    color:$--color-danger;
  }
  .btn{
    width: 200px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    margin:10px;
    cursor: pointer;
  }
  .btn_large{
    width: 100%;
    margin:10px 0;
    background: $--color-primary;
  }
  .btn.cur{
    background:$--color-primary;
    color: #fff;
  }
  .white_text{
    color:#fff;
  }
  .rule_item1{
    width: 270px;
    margin-right: 60px;
  }
  .rule_item{
    height: 100px;
    background: url('~@/assets/images/bg21.png') no-repeat center center;
    background-size: 100% 100%;
    color:$--color-primary;
    text-align: center;
    margin-bottom:30px;
    cursor: pointer;
  }
  .rule_item.cur{
    background: url('~@/assets/images/bg22.png') no-repeat center center;
    color:#fff;
  }
  .rule_item span{
    font-size: 26px;
    margin-top: 10px;
  }
  .line_box{
    position: relative;
  }
  .line_box::before{
    display: block;
    content: '';
    position:absolute;
    left: -49px;
    top:-16px;
    width: 1px;
    height: 144px;
    background-color:$--color-primary;
  }
  .tree_wrap{
    padding-left: 50px;
  }
  .label{
    line-height: 30px;
  }
  .btm_btns{
    margin-top: 50px;
  }
  .table_td{
    border:1px solid #eee;
    margin:0 -1px -1px 0;
    height: 36px;
    line-height: 36px;
    text-align: center;
    font-size: 14px;
    color:#444;
  }
  .table_th{
    background: #f6f6f6;
  }
  .table_btn{
    font-size: 12px;
    color:$--color-primary;
    cursor: pointer;
  }
  .dialog_title{
    line-height: 40px;
    font-size: 16px;
  }
</style>